<template>
	<view class="Dialog">
		<uni-popup ref="popup" :type="type" :animation="animation" :background-color="bgColor" @change="onChange" @maskClick="maskClick">
			<view class="dialog-box" :class="{ 'single': type == 'center'}">
				<view class="dialog-big-title">{{title}}</view>
				<view class="dialog-tips">{{tips}}</view>
				<view class="diglog-btns">
					<view class="diglog-btn left-btn" @click="close">{{leftBtn}}</view>
					<view class="diglog-btn right-btn" @click="handleRight">{{rightBtn}}</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:"Dialog",
		props: {
			type: {
				type: String,
				default: 'center'
			},
			animation: {
				type: Boolean,
				default: false
			},
			bgColor: {
				type: String,
				default: 'none'
			},
			title: {
				type: String,
				default: '删除收藏夹？'
			},
			tips: {
				type: String,
				default: '你将无法还原它。'
			},
			leftBtn: {
				type: String,
				default: '取消'
			},
			rightBtn: {
				type: String,
				default: '删除'
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			onChange(e) {
				this.$emit('change', e);
			},
			maskClick() {
				this.$emit('maskClick');
			},
			handleRight() {
				this.$emit('confirm');
			}
		}
	}
</script>

<style lang="scss">
$border-radius: 40rpx;
.Dialog {
	.dialog-box {
		overflow: hidden;
		padding: 60rpx 60rpx 0;
		background-color: #fff;
		border-radius: $border-radius $border-radius 0 0;
		&.single {
			border-radius: $border-radius;
		}
	}
	.dialog-big-title {
		font-size: 50rpx;
		font-weight: 700;
		text-align: center;
		letter-spacing: 2rpx;
		margin-bottom: 20rpx;
	}
	.dialog-tips {
		text-align: center;
	}
	.diglog-btns {
		display: flex;
		justify-content: center;
		padding: 60rpx 0 40rpx;
	}
	.diglog-btn {
		width: 130rpx;
		height: 110rpx;
		text-align: center;
		line-height: 110rpx;
		border-radius: 60rpx;
		margin: 0 10rpx;
	}
	.left-btn {
		background-color: #efefef;
		color: #111;
	}
	.right-btn {
		background-color: #e60023;
		color: #fff;
	}
}
</style>
